<template>
  <div id="tagImortFile">
    <el-form-item :label="fileData.labelName" prop="labelName">
      <el-upload
        action="#"
        accept=".xlsx,.xls"
        :show-file-list="false"
        :auto-upload="false"
        :on-change="changeUpload"
      >
        <el-input
          v-model="fileData.fileName"
          disabled
          placeholder="请选择上传文件..."
        ></el-input>
        <el-button type="primary" class="upload_btn">
          <div class="fa fa-folder-open"></div>
          添加文件
        </el-button>
      </el-upload>
      <el-button
        type="info"
        class="download_btn fa fa-file-excel-o"
        @click="downloadTemplete"
      >
        下载模板
      </el-button>
      <div class="tip">
        提示：仅允许导入“xls”或“xlsx”格式文件！
      </div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'ImportFile',
  props: {
    fileData: {
      type: Object,
      default: function() {
        return {
          labelName: '', // label名称
          fileName: '', // 上传文件名称
          upFile: '' // 上传文件
        }
      }
    },
    dialogData: {
      type: Object,
      default: function() {
        return {
          url: '', // 导入接口
          downUrl: '' // 下载模板接口
        }
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    // 文件上传成功
    changeUpload: function(file, fileList) {
      //校验格式
      let FileExt = file.name.replace(/.+\./, '')
      if (FileExt !== 'xlsx' && FileExt !== 'xls') {
        this.$message({
          message: '文件格式错误！',
          type: 'warning'
        })
        return
      }
      this.fileData.fileName = file.name
      this.fileData.upFile = file.raw
    },
    // 下载模板按钮
    downloadTemplete() {
      let url = this.dialogData.downUrl
      this.downFile('get', url, '', '模板')
    }
  }
}
</script>

<style lang="less">
#tagImortFile {
  .el-input {
    float: left;
    border-radius: 0;
    width: 265px !important;

    .el-input__inner {
      border-radius: 0;
    }
  }

  .upload_btn {
    float: left;
    height: 32px;
    border-radius: 0;
    background: #1dc8a4;
    border: none;
    margin-top: 4px;
  }

  .download_btn {
    /*margin: 10px 0;*/
  }

  .tip {
    color: #ff0000;
    /* margin-bottom: 30px;*/
  }
}
</style>
